<template>
	<div class="container mainTablePage">
		<el-card class="box-card mainPage">
			<div class="setHeadFlex">
				<div>
					<div>
						<form-list :formConfig="formConfig" @searchMethodParent="searchMethodParent" />
					</div>
				</div>
			</div>
			<div ref="suixinzhu" :style="{ height: height + 'px' }" class="showTable">
				<vxe-grid v-bind="gridOptions" :data="tableData">
					<template #doneZ="{ row }" style="width: 300px">
						<div @click="() => updateOrAdd(row)" style="color: #1890ff; cursor: pointer; overflow: hidden; text-overflow: ellipsis">
							{{ row.messageSubject }}
						</div>
					</template>
					<template #pager>
						<!--使用 pager 插槽-->
						<vxe-pager
							:layouts="['PrevPage', 'Number', 'NextPage', 'FullJump']"
							v-model:current-page="searchObj.pageIndex"
							v-model:page-size="searchObj.pageSize"
							:total="searchObj.total"
							@page-change="handlePageChange"
						>
							<template #left>
								<div style="margin-top: 1px; display: flex">
									<div>共 {{ searchObj.total }} 条</div>
									<div class="setCount">
										<vxe-input
											@blur="
												() => {
													searchObj.pageIndex = 1;
													getList();
												}
											"
											style="width: 50px"
											type="number"
											v-model="searchObj.pageSize"
											size="mini"
										></vxe-input>
									</div>
								</div>
							</template>
						</vxe-pager>
					</template>
				</vxe-grid>
			</div>
			<!-- <div v-if="isAddModal">
		  <AddUpdate  :editData="editData" :title="editData.id ? '编辑' : '新增'"
			@updateMethod="updateMethod" />
		</div> -->
			<el-drawer v-model="isAddModal" title="消息详情" :with-header="false">
				<div style="padding: 24px">
					<div class="setZhu">
						<div class="sethead">
							{{ editData.messageSubject }}
						</div>
						<div class="flexZhu">
							<div>发件人:</div>
							<div>
								{{ editData.fromUserName }}
							</div>
						</div>
						<div class="flexZhu">
							<div>发件时间:</div>
							<div>
								{{ editData.sendTime }}
							</div>
						</div>
						<div class="flexZhu">
							<div>阅读时间:</div>
							<div>
								{{ editData.readTime }}
							</div>
						</div>

						<div style="margin-top:20px">
							<el-input v-model="editData.messageContent"  type="textarea" :autosize="{ minRows: 16 }" />
						</div>
					</div>
				</div>
			</el-drawer>
		</el-card>
	</div>
</template>
<script setup>
import { onMounted, reactive, ref, computed, h, toRefs } from 'vue';
import FormList from '/@/components/commonSearch.vue';
import AddUpdate from '/@/components/AddDialog/index.vue';
import { localMessageList, localMessageGet } from '/@/api/zhu.js';
import { ElCheckbox, ElMessage } from 'element-plus';

/**
 * @desc 设置响应式数据放这一块
 */

/**
 * @desc 通过ref获取到表格距离上方高度 进而设置
 */
let suixinzhu = ref(null);

/**
 * @desc 表格动态高度计算
 */
let height = ref();
/**
 * @desc 表格展示列表数据
 */
let tableData = ref([]);

/**
 * @desc 表格是否在loading
 */
let loading = ref(false);
/**
 * @desc 表格选中行
 */
let selectionData = ref([]);

/**
 * @desc 查询条件响应式
 */
let searchObj = reactive({ pageIndex: 1, pageSize: 30, total: 100 });

/**
 * @desc 是否打开新增编辑的弹框
 */
let isAddModal = ref(false);
/**
 * @desc 新 编辑弹框展示的数据
 */
let editData = reactive({});

/**
 * @desc 设置表格响应式配置
 */
let gridOptions = reactive({
	border: true,
	loading: loading,
	filterConfig: {
		showIcon: false,
	},
	columnConfig: {
		resizable: true,
	},
	showOverflow: 'tooltip',
	showHeaderOverflow: 'tooltip',
	showFooterOverflow: 'tooltip',

	round: true,
	height: '100%',
	// 展示自定义内容 两种方式 一种写在slots配置  一种写在dom层
	columns: [
		{
			field: 'messageSubject',
			title: '标题',
			width: 300,
			slots: {
				default: 'doneZ',
			},
		},
		{
			field: 'fromUserName',
			title: '发件人',
		},

		{ field: 'sendTime', title: '发起时间' },
		{ field: 'readTime', title: '阅读时间' },
	],
});

/**
 * @desc 属性计算上面的查询条件配置
 */
const formConfig = computed(() => {
	let arr = [
		{
			label: '标题',
			key: 'searchContent',
			type: 'input',
		},
	];
	return {
		inline: true,
		size: 'mini',
		labelWidth: '80px',
		formItemList: arr,
	};
});
/**
 * @desc 计算出表格距离上面高度  动态适配表格
 */
onMounted(() => {
	setTimeout(() => {
		let { top = 0 } = suixinzhu.value.getBoundingClientRect();
		height.value = window.innerHeight - top - 20;
	}, 600);
});

/**
 * @desc 获取数据列表
 */
const getList = () => {
	let params = { ...searchObj };
	loading.value = true;

	localMessageList(params).then((res) => {
		let { records = [], total } = res.data.data;
		tableData.value = records;
		loading.value = false;
		searchObj.total = total;
	});
};

/**
 * @desc 翻页器操作翻页
 */
const handlePageChange = (e) => {
	let { currentPage, pageSize } = e;
	searchObj = { ...searchObj, pageIndex: currentPage, pageSize };
	getList();
};

/**
 * @desc 查询条件触发操作
 */
const searchMethodParent = (e) => {
	searchObj = { ...searchObj, ...e, pageIndex: 1 };
	getList();
};

/**
 * @desc 新增或者编辑
 */

const updateMethod = (e, isSubmit = false) => {
	isAddModal.value = false;
	if (isSubmit) {
		ElMessage.success('操作成功');
		searchObj.pageIndex = 1;
		getList();
	}
};

/**
 * @desc 打开弹框 赋值数据
 */
const updateOrAdd = (e) => {
	localMessageGet(e.id).then((res) => {
		editData = res.data.data;
		isAddModal.value = true;
		
	});
};
</script>

<style scoped lang="less">
.zhugaox {
	padding: 24px;
}

/deep/ .vxe-table--body-wrapper table th {
	background-color: #f8f8f9 !important;
}
.setZhu {
	.sethead {
		font-size: 18px;
		font-weight: 500;
		line-height: 60px;
	}

	.flexZhu {
		display: flex;
		font-weight: 600;
		font-size: 14px;
		line-height: 30px;
		& > div:first-child {
			margin-right: 12px;
		}
	}
}
/deep/ .el-overlay{
	z-index: 99999999 !important;
}
</style>

<!-- 复选框选中 操作新增和删除 编辑  -->
